<template>
	<div v-if="modelValue" class="loadding" :style="{ 'z-index': zIndex }"><slot></slot></div>
</template>

<script>
export default {
	props: {
		modelValue: {
			type: Boolean,
			default: false
		},
		target: {
			type: String,
			default: 'body'
		},
		zIndex: {
			type: String,
			default: '2022'
		}
	},
	mounted() {
		let el = document.querySelector(this.target);
		if (el) {
			el.appendChild(this.$el);
		} else {
			console.error('target selector `' + this.target + '`  is not found');
		}
	}
};
</script>

<style lang="scss">
.loadding {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.8);
	color: var(--el-color-primary);
	top: 0;
	left: 0;
}
</style>
